<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default" status-icon
            scroll-into-view-options="true">
            <el-form-item label="关联专题：">
                <el-transfer v-model="value1" filterable :filter-method="filterMethod" filter-placeholder="请输入专题名称"
                    :data="data" />
            </el-form-item>
            <el-form-item label="关联优选：">
                <el-transfer v-model="value1" filterable :filter-method="filterMethod" filter-placeholder="请输入专题名称"
                    :data="data" />
            </el-form-item>
            <el-form-item class="button">
                <el-button class="before" @click="beforeClick">上一步，填写商品信息</el-button>
                <el-button type="primary" class="next" @click="nextClick">完成，提交商品</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from '../../../request/api'
import useProduct from '../../../hooks/useProduct'
import dayjs from 'dayjs'
import { useProductStore } from '../../../stores/addProduct'

//选择商品关联
interface Option {
    key: number;
    label: string;
    initial: string;
}
const generateData = () => {
    const data: Option[] = [];
    const states = [
        "California",
        "Illinois",
        "Maryland",
        "Texas",
        "Florida",
        "Colorado",
        "Connecticut ",
    ];
    const initials = ["CA", "IL", "MD", "TX", "FL", "CO", "CT"];
    states.forEach((city, index) => {
        data.push({
            label: city,
            key: index,
            initial: initials[index],
        });
    });
    return data;
};
const data = ref<Option[]>(generateData());
const value1 = ref([]);
const filterMethod = (query: any, item: any) => {
    return item.initial.toLowerCase().includes(query.toLowerCase());
};

// 如果上面表格条件完成 , 跳转下一步
let product = useProductStore()
const beforeClick = () => {
    product.$patch({
        active: product.active - 1
    })
    // console.log(product.active);
}
const nextClick = () => {
    product.$patch({
        active: 0
    })
    // console.log(product.active);
}

const ruleForm = reactive({

})
</script>

<style scoped lang="scss">
.demo-ruleForm {
    width: 700px;
    margin-top: 60px;
    margin-left: 20px;
}

.weight {
    display: flex;

    .el-input {
        width: 300px;
        margin-right: 20px;
    }
}

.button {
    margin-left: 100px;
}

.new {
    margin-right: 10px;
}

.mt {
    margin-top: 10px;
}

.box-card {
    width: 100%;
}
</style>